<template>
	<view class="content">
		<scroll-view scroll-x="true" @scrolltolower="scrolltolower" class="scroll-view_H">
			<view class="" style="display: inline-block;">
				<view class="display-flex  padding-about-24 align-items padding-top-30">
					<view v-for="item,index in tabslist" :key="index" @click="type = item.type,getInviteQrcode() "
						class="margin-right-20" :class="type == index?'tabs-active':'tabs'">
						{{item.name}}
					</view>
				</view>
			</view>
		</scroll-view>


		<view class="margin-top-30">
			<liu-slide-img :list="info.data" :type="2" :autoplay="autoplay" :interval="interval"
				@change="change"></liu-slide-img>
		</view>
		<view class="position-absolute"
			style="bottom:0 ;width: 100%; height: 38vh;background: #FFFFFF;border-radius: 30rpx 30rpx 0 0;">
			<view class="" style="padding: 24rpx;">
				<view class="display-flex space-between align-items">
					<view class="font-size-28 font-weight-500">
						邀请文案
					</view>
					<view @tap.stop="setClipboardData(info.content)" class="display-flex margin-top-05 align-items">

						<image :src="imgaeUrl('/static/mine/copy.png')" style="width: 24rpx;height: 24rpx;"
							mode="aspectFill">
						</image>
						<view class="font-size-24 margin-left-10" style="color: #434343;">
							复制文案
						</view>
					</view>
				</view>
				<view class="textarea margin-top-20   font-size-24 font-weight-500" style="overflow: scroll;">
					<!-- <zero-markdown-view :markdown=""></zero-markdown-view> -->
					<!-- <text>info.</text> -->
					<view class="copywriting-txt">
						<text>{{info.content}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom " style="border-radius: 30rpx 30rpx 0 0;">
			<view class="padding-about-24 padding-top-30 display-flex space-between align-items">
				<button style="width: 33.333%;" open-type="share">
					<view class="display-flex flex-direction-column center align-items">
						<image :src="imgaeUrl('/static/mine/wx.png')" style="width: 80rpx;height: 80rpx;"
							class="border-radius" mode="aspectFill"></image>
						<view class="font-size-24 color-333">
							分享给好友
						</view>
					</view>
				</button>
				<button @click="nativeUI('正在开发中')" style="width: 33.333%;">
					<view  class="display-flex flex-direction-column center align-items">
						<image :src="imgaeUrl('/static/mine/lj.png')" style="width: 80rpx;height: 80rpx;"
							class="border-radius" mode="aspectFill"></image>
						<view class="font-size-24 color-333">
							锁粉链接
						</view>
					</view>
				</button>
				<button style="width: 33.333%;" @click="saveInviteQrcode">
					<view class="display-flex flex-direction-column center align-items">
						<image :src="imgaeUrl('/static/mine/xz.png')" style="width: 80rpx;height: 80rpx;"
							class="border-radius" mode="aspectFill"></image>
						<view class="font-size-24 color-333">
							保存海报
						</view>
					</view>
				</button>
			</view>
			<view class="safe-area-inset-bottom">

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app';
	import {
		imgaeUrl,
		nativeUI,
		navigateTo,
		navigateBack,
		setClipboardData
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const info = ref([])
	const tabslist = ref([{
		name: '全部',
		type: 0
	}, {
		name: '合伙人招募',
		type: 1
	}, {
		name: '明星直播间',
		type: 2
	}, {
		name: '新人福利',
		type: 3
	}, {
		name: '品牌海报',
		type: 4
	}, {
		name: '节气海报',
		type: 5
	}])
	const type = ref(0)
	// const autoplay = ref(true)
	const interval = ref(3000)
	const activeIndex = ref(0)
	onLoad(function(option) {
		getInviteQrcode()
	});
	onShow(function() {});

	function change(e) {
		activeIndex.value = e
	}
	async function saveInviteQrcode() {
		uni.showLoading({
			title: '加载中',
		});
		let object = {
			id: info.value.data[activeIndex.value].id
		}
		const {
			code,
			data
		} = await api.saveInviteQrcode(object)
		uni.hideLoading();
		if (code == 0) {
			uni.downloadFile({
				url: data.url,
				success: (res) => {
					if (res.statusCode === 200) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: "保存成功",
									icon: "none"
								});
							},
							fail: function() {
								uni.showToast({
									title: "保存失败，请稍后重试",
									icon: "none"
								});
							}
						});
					}
				}
			})
		}
	}
	async function getInviteQrcode() {
		let object = {
			type: type.value
		}
		const {
			code,
			data
		} = await api.getInviteQrcode(object)
		if (code == 0) {
			info.value = data
		}
	}
	onReady(function() {});
	onReachBottom(function() {});
	onShareAppMessage(function(res) {
		console.log(res);
		return {
			title: local.get('config').subtitle,
			path: '/pages/Home/home/home' + '?puserId=' + local.get('userinfo').id,
		}
	})
	onShareTimeline(function(res) {
		return {
			title: local.get('config').subtitle,
			path: '/pages/Home/home/home' + '?puserId=' + local.get('userinfo').id,
		}
	})
</script>

<style scoped lang="scss">
	.copywriting-txt {
		padding: 20rpx;
		font-size: 28rpx;
		color: #000;
		line-height: 1.5;
	}

	.textarea {
		padding: 24rpx;
		height: 140rpx;
		background: #F6F6F6;
		border-radius: 24rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.tabs,
	.tabs-active {
		padding: 10rpx 36rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;

	}

	.tabs-active {
		border: 1rpx solid #FF351B;
		color: #FF351B;
		font-weight: 500;
	}

	.tabs {
		color: #131315;
		border: 1rpx solid #FFFFFF;
	}
</style>